<template>
  <div class="login">
    <div class="content">
      <div class="popup">
        <img src="@/assets/cn.png" class="lang" />
        <img src="@/assets/logo.png" class="logo" />
        <div class="inputGroup" :class="{ inputError: userError.account }">
          <h2>账号:</h2>
          <el-input
            v-model="user.account"
            placeholder="Email Address"
          ></el-input>
          <p class="errInfo" v-show="userError.account">请输入正确的用户名!</p>
        </div>
        <div class="inputGroup" :class="{ inputError: userError.password }">
          <h2>密码:</h2>
          <el-input
            v-model="user.password"
            placeholder="Your Password"
            show-password
          ></el-input>
          <p class="errInfo" v-show="userError.password">密码</p>
        </div>
        <router-link to="/" class="forgetPassword"> 忘记密码 </router-link>
        <el-button type="primary" class="loginBtn" @click.stop="loginClick">
          登录
        </el-button>
      </div>
    </div>

    <footer>
      <img src="@/assets/seeed.png" class="seeed" />
      <div class="copyright">
        <p>© 2008-2021 "lang.compony"</p>
        <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank"
          >粤ICP备13058720号</a
        >
      </div>
      <router-link to=""> "lang.privacy"</router-link>
      <img src="@/assets/mcafee.png" class="mcafee" />
    </footer>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import * as api from "../../api/index";
import { useStore } from "@/store/useStore";
//解构导入
import { storeToRefs } from "pinia";
import { useRouter } from "vue-router";
import { routes, superRoutes } from "@/router/routes";
const router = useRouter();
const store = useStore();
//让解构后的状态具备响应式
const { username, token, type } = storeToRefs();

let user = reactive({
  account: "super",
  password: "super",
});
let userError = reactive({
  account: false,
  password: false,
});

const loginClick = () => {
  let data = {
    account: user.account,
    password: user.password,
  };
  api.$accountLogin(data).then((res) => {
    store.$patch((state) => {
      state.token = res.token;
      state.username = res.data.username;
      state.type = res.data.type;
    });
    router.push("/home/index");
  });
};
//根据用户类型动态添加路由(表)
if (type == 1) {//超级管理员
  superRoutes.forEach(route => {
    router.addRoute(route);
  });
  //把路由表存入pinia
  store.$patch(state => {
    state.routes = superRoutes;
  });
} else {//管理员
  routes.forEach(route=>{
    router.addRoute(route);
  })
  store.$patch(state=>{
    state.routes = routes;
  });
}
</script>

<style lang="less" scoped>
@import "./index.less";
</style>

<style lang="less">
.registerBtn > span {
  margin-left: -8px;
}
</style>
